<template>
  <div>
    <div class="bg">
      <div class="content1">
        <ul>
          <li v-if="!addressInfo">
            <!-- <img src="../../../assets/img/img/wd (4).png" alt=""> -->
            <p>
              <van-button type="info" to="site">新增地址</van-button>
            </p>
          </li>
          <li v-else>
            <p>{{addressInfo.username}} &nbsp; &nbsp; &nbsp; {{addressInfo.userphone}}</p>
            <p>{{addressInfo.location+addressInfo.useraddress}}</p>
          </li>
          <li>
            <p>
              <van-button type="info" to="site">修改地址</van-button>
            </p>
          </li>
        </ul>
      </div>
      <div v-for="item in list" :key="item.id" style="margin-top:0.2rem">
        <van-card
          :num="item.num"
          :price="item.price"
          :title="item.goodsname"
          :thumb="$pre+item.img"
        />
      </div>
      <ul class="content2">
        <li>
          <div>
            <p>商品金额</p>
          </div>
          <div>
            <p>￥{{countmoney}}</p>
          </div>
        </li>
        <li>
          <div>
            <p>优惠活动</p>
          </div>
          <div>
            <p>-￥200</p>
          </div>
        </li>
        <li>
          <div>
            <p>优惠券</p>
          </div>
          <div>
            更多优惠券
            <img src="../../../assets/img/img/wd (9).png" alt />
          </div>
        </li>
      </ul>
      <van-submit-bar :price="countmoney*100" button-text="提交订单" @submit="gopay" />
    </div>
  </div>
</template>

<script>
import { reqShopList, reqOrderAdd, reqAddressList } from "../../../http/api.js";
export default {
  data() {
    return {
      list: [],
      countmoney: "",
      addressInfo: {}
    };
  },
  methods: {
    gopay() {
      let json = JSON.parse(localStorage.getItem("order"));
      reqOrderAdd({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        address: 1,
        ...json
      }).then(res => {
        this.$router.push("/pay?orderId=" + res.data.list.outTradeNo);
        console.log(res.data.list.outTradeNo);
        
      });
    }
  },
  mounted() {
    reqAddressList({
      uid: JSON.parse(localStorage.getItem("user")).uid
    }).then(res => {
      this.addressInfo = res.data.list[0];
    });

    let idstr = JSON.parse(localStorage.getItem("order")).idstr;
    idstr.split(",").forEach(item => {
      reqShopList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: item
      }).then(res => {
        console.log(res.data.list);
        
        this.list.push(res.data.list[0]);
        this.countmoney = JSON.parse(localStorage.getItem("order")).countmoney;
      });
    });
  }
};
</script>

<style scoped>
.bg {
  background: linear-gradient(to bottom, #ff6446 10%, #f2f2f2 10%);
  height: 85vh;
}
.content1 {
  width: 6.72rem;
  /* height: 2.06rem; */
  margin: 30px auto;
  padding: 0.2rem;
  background: white;
  border-radius: 0.1rem;
}
.content1 > ul li {
  height: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.content2 {
  /* height: 4rem; */
  background: white;
  padding: 0.2rem;
  margin-top: 10px;
}
.content2 li {
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content2 li div:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bolder;
}
.content2 li div:nth-of-type(1) img {
  width: 0.31rem;
  height: 0.32rem;
  margin-right: 0.16rem;
}
.content2 div:nth-of-type(2) img {
  width: 0.1rem;
  height: 0.26rem;
  margin-left: 0.16rem;
}
.content2 div:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: gray;
}
</style>